<script lang="ts" setup>
import PageCaontainer from '@/arco-components/PageContainer';
import API from '@/services';
import { Message, Modal } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ChangeLog from './components/ChangeLog/index.vue';
import BindDimension from './components/BindDimension/index.vue';
import KeyAssociation from './components/KeyAssociation/index.vue';
import EditRelationDrawer from './components/EditRelationDrawer/index.vue';
import * as RouteNames from '@/router/consts';

const route = useRoute();
const router = useRouter();
const info = ref<defs.DataTableVo>({});
const tabKey = ref('bindDimension');
const loading = ref(false);
const changeLogRef = ref();
const showEdit = ref(false);
const keyAssociationRef = ref<any>(null);
const editInput = ref(false);

// 获取维度详情信息
const getDimensionDetail = async () => {
  loading.value = true;
  const { data } = await API.dataTable.getDataTableGetById({
    id: Number(route.params.id)
  });
  info.value = data || {};
  loading.value = false;
};

// 删除维表
const fetchDelete = async (id: any) => {
  try {
    await API.dataTable.deleteDataTableDelDimTableById({ id });
    return true;
  } catch (error) {
    throw error;
  }
};
const deleteDimension = (record: any) => {
  Modal.confirm({
    modalClass: 'model-message-confirm',
    title: '是否确定删除该维表？',
    content: '删除后不可恢复',
    simple: false,
    closable: true,
    okText: '确认删除',
    okButtonProps: {
      style: {
        backgroundColor: '#FF1A3B'
      }
    },
    onBeforeOk: (done) => {
      fetchDelete(record.id)
        .then((res) => {
          Message.success('删除成功');
          router.push({
            name: RouteNames.ROUTE_INDEXMODELMANAGE,
            params: {
              key: 'dimension'
            }
          });
        })
        .finally(() => {
          done(true);
        });
    }
  });
};

// 修改维表描述 / 名称
const updateDimension = async () => {
  const params = {
    dimensionTableDesc: info.value.dimensionTableDesc,
    tableId: info.value.id,
    tableName: info.value.tableName
  };
  const res = await API.dataTable.postDataTableUpdateDimTableDesc({
    ...params
  });
  if (res.code === 200) {
    return Message.success('更新成功');
  }
};
// 编辑备注
const editNote = () => {
  editInput.value = true;
};
const onEditEnd = async () => {
  loading.value = true;
  try {
    await updateDimension();
    editInput.value = false;
    getDimensionDetail();
    changeLogRef.value.getChangeLog();
  } catch (error) {
    loading.value = false;
  }
};

const onEditRelationSuccess = () => {
  if (keyAssociationRef.value) {
    keyAssociationRef.value.reload();
  }
};
// 返回上一页
const handleGoback = () => {
  router.push({
    name: RouteNames.ROUTE_INDEXMODELMANAGE,
    params: {
      key: 'dimension'
    }
  });
};

onMounted(() => {
  getDimensionDetail();
});
</script>
<template>
  <PageCaontainer show-back @back="handleGoback">
    <a-spin
      style="display: block; height: 100%; overflow-y: hidden"
      :loading="loading"
    >
      <a-card class="dimension-info-card">
        <div class="dimension-info-header">
          <div class="dimension-info-header-title">
            {{ info.tableName }}
          </div>
          <div class="flex-center">
            <div class="dimension-info-header-desc">
              {{ info.createByName }} 创建于 {{ info.createTime }}
            </div>
            <a-button type="outline" @click="deleteDimension(info)"
              >删除</a-button
            >
          </div>
        </div>
        <div class="dimension-info-desc">
          <div class="dimension-info-desc-label">备注：</div>
          <!-- <a-typography-paragraph
            editable
            v-model:editText="info.dimensionTableDesc"
            @edit-end="onEditEnd"
          >
            {{ info.dimensionTableDesc }}
          </a-typography-paragraph> -->
          <div class="dimension-info-desc-content">
            <div class="dimension-info-desc-content-text" v-if="!editInput">
              <span>{{ info.dimensionTableDesc }}</span>
              <img
                src="@/assets/images/edit_img.svg"
                style="margin-left: 6px; cursor: pointer"
                @click="editNote"
              />
            </div>
            <a-input
              v-else
              :style="{ width: '400px' }"
              v-model="info.dimensionTableDesc"
              :max-length="40"
              allow-clear
              show-word-limit
              @blur="onEditEnd"
            />
          </div>
        </div>
        <a-tabs v-model:active-key="tabKey" class="data-manage-tab">
          <a-tab-pane key="bindDimension" title="绑定维度"> </a-tab-pane>
          <a-tab-pane key="keyAssociation" title="外键关联"> </a-tab-pane>
          <a-tab-pane key="changeLog" title="变更记录"> </a-tab-pane>
        </a-tabs>
        <div style="flex: 1; overflow-y: auto">
          <bind-dimension
            v-if="tabKey === 'bindDimension'"
            :id="(route.params.id as string)"
          ></bind-dimension>

          <key-association
            ref="keyAssociationRef"
            :id="(route.params.id as string)"
            v-if="tabKey === 'keyAssociation'"
            @editEvent="() => (showEdit = true)"
          ></key-association>

          <change-log
            :id="(route.params.id as string)"
            v-if="tabKey === 'changeLog'"
            ref="changeLogRef"
          ></change-log>
        </div>
      </a-card>
    </a-spin>
    <EditRelationDrawer
      v-model:visible="showEdit"
      :id="(route.params.id as string)"
      unmountOnClose
      @success="onEditRelationSuccess"
    />
  </PageCaontainer>
</template>

<style scoped lang="scss">
.dimension-info {
  &-card {
    height: 100%;
    overflow: auto;
    display: flex;
    width: 100%;
    :deep(.arco-card-body) {
      padding: 0;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  }
  &-header {
    height: 48px;
    display: flex;
    padding: 12px 18px;
    align-items: center;
    border-bottom: 1px solid #e8ebf2;
    box-sizing: border-box;
    &-title {
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #33353b;
    }
    &-desc {
      font-size: 12px;
      color: #9b9fab;
      margin-right: 12px;
    }
  }
  &-desc {
    display: flex;
    padding: 12px 18px;
    align-items: center;
    color: #33353b;
    border-bottom: 1px solid #e8ebf2;
    &-label {
      width: 42px;
      font-size: 12px;
      color: #9b9fab;
    }
    :deep(.arco-typography-edit-content) {
      margin-bottom: 0;
    }
    :deep(div.arco-typography) {
      margin-bottom: 0;
    }
    &-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      &-text {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
}
// .data-manage-tab {
//   flex: 1;
//   display: flex;
//   flex-direction: column;
//   :deep(.arco-tabs-content) {
//     flex: 1;
//   }
//   :deep(.arco-tabs-content .arco-tabs-content-list) {
//     height: 100%;
//   }
//   :deep(.arco-tabs-pane) {
//     height: 100%;
//     display: flex;
//   }
// }
</style>
